/*
 * @Author: chengsl
 * @Date: 2023-01-10 14:54:56
 * @LastEditors: chengsl
 * @LastEditTime: 2023-01-10 14:56:10
 * @Description: 折线对比图 widgetLineCompareChart
 */
export default {
  axisPointer: { link: { xAxisIndex: 'all' } },
  title: {
    text: '',
    show: true,
    left: 'center',
    textStyle: { color: '#FFD700', fontSize: 20, fontWeight: 'normal' }
  },
  tooltip: {
    show: true,
    trigger: 'axis',
    axisPointer: { type: 'line', lineStyle: { type: 'dashed' } },
    formatter: (params) => {
			return `${params[0].name}
			<div style="text-align: left;">${params[0].marker} ${params[0].seriesName}:   <strong>${params[0].value}</strong>
			<br/>${params[1].marker} ${params[1].seriesName}:   <strong>${params[1].value}</strong></div>`
		}
  },
  grid: [
    { left: 20, right: 50, top: 40, containLabel: true, bottom: '50%' },
    { left: 20, right: 50, containLabel: true, top: '51%', bottom: 40 }
  ],
  legend: {
    textStyle: { color: '#A9B2BC', fontSize: 20 },
    show: true,
    left: 'center',
    top: 'top',
    bottom: 'top',
    orient: 'horizontal',
    itemGap: 40,
    itemWidth: 24,
    data: ['success', 'fail']
  },
  xAxis: [
    {
      gridIndex: 0,
      show: true,
      name: '',
      nameTextStyle: { color: '#fff', fontSize: 14 },
      type: 'category',
      boundaryGap: true,
      axisLine: { show: true, lineStyle: { color: 'rgba(32,45,92,0.5)' } },
      axisTick: { show: false },
      axisLabel: {
        show: true,
        interval: 0,
        textStyle: { color: '#fff', fontSize: 14 }
      },
      data: ['07-25', '07-26', '07-27', '07-28', '07-29']
    },
    {
      gridIndex: 1,
      show: true,
      type: 'category',
      position: 'top',
      boundaryGap: true,
      axisLine: { show: true, lineStyle: { color: 'rgba(32,45,92,0.5)' } },
      axisTick: { show: false },
      axisLabel: { show: false, interval: 0 },
      data: ['07-25', '07-26', '07-27', '07-28', '07-29']
    }
  ],
  yAxis: [
    {
      type: 'value',
      gridIndex: 0,
      splitNumber: 0,
      show: true,
      scale: false,
      name: '',
      nameTextStyle: { color: '#fff', fontSize: 14 },
      axisLabel: { show: true, textStyle: { color: '#fff', fontSize: 14 } },
      axisTick: { show: false },
      axisLine: { show: true, lineStyle: { color: 'rgba(32,45,92,0.5)' } },
      splitArea: {
        show: true,
        areaStyle: { color: ['rgba(32,45,92,0.1)', 'rgba(32,45,92,0.5)'] }
      },
      splitLine: {
        show: true,
        lineStyle: { width: 1, color: 'rgba(32,45,92,0.5)' }
      },
      axisPointer: { snap: true }
    },
    {
      gridIndex: 1,
      type: 'value',
      splitNumber: 0,
      show: true,
      scale: false,
      name: '',
      nameTextStyle: { color: '#fff', fontSize: 14 },
      inverse: true,
      axisLabel: { show: true, textStyle: { color: '#fff', fontSize: 14 } },
      axisTick: { show: false },
      axisLine: { show: true, lineStyle: { color: 'rgba(32,45,92,0.5)' } },
      splitArea: {
        show: true,
        areaStyle: { color: ['rgba(32,45,92,0.1)', 'rgba(32,45,92,0.5)'] }
      },
      splitLine: {
        show: true,
        lineStyle: { width: 1, color: 'rgba(32,45,92,0.5)' }
      },
      axisPointer: { snap: true }
    }
  ],
  series: [
    {
      name: 'success',
      type: 'line',
      xAxisIndex: 0,
      yAxisIndex: 0,
      showSymbol: true,
      symbol: 'circle',
      symbolSize: 8,
      smooth: false,
      itemStyle: { color: '#0060FF', borderColor: '#ffffff', borderWidth: 2 },
      lineStyle: { color: '#0060FF', width: 2 },
      label: {
        position: 'top',
        distance: 10,
        show: false,
        color: '#fff',
        fontSize: 14,
        fontWeight: 'normal'
      },
      data: ['2', '5', '15', '10', '9'],
      areaStyle: { opacity: 0.1 }
    },
    {
      name: 'fail',
      type: 'line',
      xAxisIndex: 1,
      yAxisIndex: 1,
      showSymbol: true,
      symbol: 'circle',
      symbolSize: 8,
      smooth: false,
      itemStyle: { color: '#3BD6FF', borderColor: '#ffffff', borderWidth: 2 },
      lineStyle: { color: '#3BD6FF', width: 2 },
      label: {
        position: 'bottom',
        distance: 10,
        show: false,
        color: '#fff',
        fontSize: 14,
        fontWeight: 'normal'
      },
      data: ['10', '20', '30', '12', '16'],
      areaStyle: { opacity: 0.1 }
    }
  ]
}
